<!--团队业绩总揽-->

<ion-header>
    <ion-toolbar content-page class="fir-toolbar">
        <ion-buttons start>
            <button ion-button icon-only (click)="backButtonClick($event)">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>团队业绩</ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>
    <div class="team-performance-head">
        <div class="groupTab">
            <span class="oneStepPer" [ngClass]="currentView===0?'active':''" (click)="chooseView(0)">
                业绩总览
            </span>
            <span class="moreStepPer" [ngClass]="currentView===1?'active':''" (click)="chooseView(1)">
                分组业绩
            </span>
            <span class="moreStepPer" [ngClass]="currentView===2?'active':''" (click)="chooseView(2)">
                历史业绩
            </span>
            <span class="switch-sign" [ngClass]="currentView===0?'':(currentView===1?'sign-change-one':'sign-change-two')"></span>
        </div>
    </div>
    <div class="group-group" *ngIf="currentView === 1">
        <div class="group-time">
            <time-filter (query)="filter()"  [(startDate)]="startFilterDate"
                         [(endDate)]="endFilterDate" [filterType]="1"></time-filter>
        </div>
        <ion-grid class="group-header">
            <ion-row>
                <ion-col col-4 text-center>
                    所辖小组
                </ion-col>
                <ion-col col-4 text-center>
                    小组总净PC
                </ion-col>
                <ion-col col-4 text-center>
                    小组总净APE
                </ion-col>
            </ion-row>
        </ion-grid>
    </div>
    <div class="performanceHead" *ngIf="currentView === 2">
        <div class="groupType">
            <div class="divLeft">所辖<br/>小组</div>
            <span class="typeName">类型</span>
            <span class="thisYear">本年</span>
            <span class="hisTop">历年最高</span>
            <span class="chaju">差距</span>
        </div>
    </div>
</ion-header>

<ion-content>
    <div class="group-overview" *ngIf="currentView === 0">
        <div class="group-tip" *ngIf=" teamOverData.rank>0 && teamOverData.rank<1000">
            恭喜您{{teamOverData.time | dateTrans:'YYYY年MM月'}}所辖净PC全国排名第<span class="group-data">{{teamOverData.rank?teamOverData.rank:'-'}}</span>名
        </div>
        <div class="groupType" *ngIf="teamOverData.rank>0 && teamOverData.rank<1000">
            <span class="type-row">全国排名</span>
            <span class="type-row">营销员</span>
            <span class="type-row">职级</span>
            <span class="type-row">所辖组净PC</span>
        </div>
        <div class="group-list" *ngIf="teamOverData.rank>0 && teamOverData.rank<1000">
            <ul *ngIf="teamOverData.nearBys&&teamOverData.nearBys.length">
                <li [ngClass]="{'active':item.agentCode == agentCode}" *ngFor="let item of teamOverData.nearBys">
                    <span>{{item.rank?item.rank:'-'}}</span>
                    <span>{{item.agentCode}}</span>
                    <span>{{item.level}}</span>
                    <span>{{item.pc?(item.pc|number:'1.0-2'):'-'}}</span>
                </li>
            </ul>
        </div>
        <div class="group-bar">
            <div class="group-bar-content">
                <div class="bar-title">
                    <span class="bar-title-name">直辖组净PC</span>
                </div>
                <div class="bar-chart">
                    <div class="bar-chart-item">
                        <span class="bar-name">本月</span>
                        <span class="bar-value-bg level-1 type-1" id="direct-month"></span>
                        <span class="bar-value type-1">{{teamOverData.directMonthPC?(teamOverData.directMonthPC|number:'1.0-2'):'-'}}</span>
                    </div>
                    <div class="bar-chart-item">
                        <span class="bar-name">本年</span>
                        <span class="bar-value-bg level-2 type-2" id="direct-year"></span>
                        <span class="bar-value type-2">{{teamOverData.directYearPC?(teamOverData.directYearPC|number:'1.0-2'):'-'}}</span>
                    </div>
                    <div class="bar-chart-item">
                        <span class="bar-name">历年最高</span>
                        <span class="bar-value-bg level-3 type-3" id="direct-hisYear" ></span>
                        <span class="bar-value type-3">{{teamOverData.directHighestPC?(teamOverData.directHighestPC|number:'1.0-2'):'-'}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="group-bar end-bar">
            <div class="group-bar-content">
                <div class="bar-title">
                    <span class="bar-title-name">所辖组净PC</span>
                </div>
                <div class="bar-chart">
                    <div class="bar-chart-item">
                        <span class="bar-name">本月</span>
                        <span class="bar-value-bg level-1 type-1" id="under-month"></span>
                        <span class="bar-value type-1">{{teamOverData.underMonthPC?(teamOverData.underMonthPC|number:'1.0-2'):'-'}}</span>
                    </div>
                    <div class="bar-chart-item">
                        <span class="bar-name">本年</span>
                        <span class="bar-value-bg level-2 type-2" id="under-year"></span>
                        <span class="bar-value type-2">{{teamOverData.underYearPC?(teamOverData.underYearPC|number:'1.0-2'):'-'}}</span>
                    </div>
                    <div class="bar-chart-item">
                        <span class="bar-name">历年最高</span>
                        <span class="bar-value-bg level-3 type-3" id="under-hisYear"></span>
                        <span class="bar-value type-3">{{teamOverData.underHighestPC?(teamOverData.underHighestPC|number:'1.0-2'):'-'}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="group-group" *ngIf="currentView === 1">
        <!-- <div class="group-time">
            <time-filter (query)="filter()"  [(startDate)]="startFilterDate"
                         [(endDate)]="endFilterDate" [filterType]="1"></time-filter>
        </div>
        <ion-grid class="group-header">
            <ion-row>
                <ion-col col-4 text-center>
                    所辖小组
                </ion-col>
                <ion-col col-4 text-center>
                    小组总净PC
                </ion-col>
                <ion-col col-4 text-center>
                    小组总净APE
                </ion-col>
            </ion-row>
        </ion-grid> -->
        <div class="no-data" *ngIf="(!groupList || groupList.length === 0) && isLoaded">
            <div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>
            <div class="no-data-txt">没有相关数据</div>
        </div>
        <ion-grid class="group-performance">
            <div *ngIf="groupList&&groupList.length">
                <ion-row class="group-item" *ngFor="let item of groupList" (click)="goToGroupMember(item)">
                    <i class="isDirect" *ngIf="item.isDirect==1"></i>
                    <ion-col col-4 text-center>
                        <ion-label class="groups-name">
                            {{item.groupName}}
                        </ion-label>
                    </ion-col>
                    <ion-col col-4 text-center>
                        <ion-label>
                            {{item.totalPC?(item.totalPC|number:'1.0-2'):'-'}}
                        </ion-label>
                    </ion-col>
                    <ion-col col-4 text-center>
                        <ion-label>
                            {{item.totalAPE?(item.totalAPE|number:'1.0-2'):'-'}}
                        </ion-label>
                    </ion-col>
                </ion-row>
            </div>
        </ion-grid>
    </div>
    <div class="performanceHead" *ngIf="currentView === 2">
        <!-- <div class="groupType">
            <div class="divLeft">所辖<br/>小组</div>
            <span class="typeName">类型</span>
            <span class="thisYear">本年</span>
            <span class="hisTop">历年最高</span>
            <span class="chaju">差距</span>
        </div> -->
        <div class="groupList">
                <div class="oneStepGroup">
                    <div *ngIf="(!hisPerData || hisPerData.length === 0) && isLoaded" class="no-data">
                        <div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>
                        <div class="no-data-txt">没有相关数据</div>
                    </div>
                    <div class="groupItem" (click)="goToMemberPerformance(a.groupId,a.groupType)" *ngFor="let a of hisPerData">
                        <span class="groupLoge" *ngIf="a.groupType==='0'"></span>
                        <div class="leaderName">
                          {{a.chargeName}}
                            <!--<span>-->
                                <!--{{a.chargeLevel}}-->
                            <!--</span>-->
                        </div>
                        <div class="groupRight">
                            <div class="groRightTop">
                                <span class="title">净PC</span>
                                <span class="fontBigger">{{a.yearPc | numberTrans}}</span>
                                <span class="fontBigger">{{a.topPc| numberTrans}}</span>
                                <span>{{a.pcGap | numberTrans}}</span>
                            </div>
                            <div class="groRightBot">
                                <span class="typeName title">净寿险<br/>件数</span>
                                <div class="divide_line">
                                    <span class="fontBigger">{{a.yearLifeInsurance| numberTrans}}</span>
                                    <span class="fontBigger">{{a.topLifeInsurance | numberTrans}}</span>
                                    <span>{{a.lifeInsGap | numberTrans}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <!--<ion-fab bottom right *ngIf="currentView === 1 || currentView === 2" class="go-up">-->
        <!--<button ion-fab (click)="goUp()" color="light">-->
            <!--<img class="go-up-icon" src="./assets/images/common/icon_top.png" alt="">-->
        <!--</button>-->
    <!--</ion-fab>-->
    <div class="go-up" *ngIf="currentView === 1 || currentView === 2" ion-fixed (click)="goUp()">
        <img class="go-up-icon" src="./assets/images/common/icon_top.png" alt="">
    </div>
</ion-content>
